<template>
  <div class="course-reply-container">

    <div class="box">

      <!--头像-->
      <div class="head-portrait">
        <Avatar icon="ios-person" :size="30" :src="obj.userInfo.headPortraitUrl"/>
      </div>

      <!--用户-->
      <div class="user">
        <!--用户名-->
        <div class="user-details">
          {{ obj.userInfo.nickName }} 回复了 @张三
        </div>

        <!--文本-->
        <div class="discuss-text">
          <div v-html="obj.discuss.text.replace(/\n/g,'<br/>')"></div>
        </div>

        <!--互动-->
        <div class="interaction">
          <!--时间-->
          <div class="date-time">{{ obj.discuss.dateTime }}</div>

          <!--赞-->
          <div class="like"
               @mouseenter="hover(obj,`like`)"
               @mouseleave="over(obj,`like`)"
               @click="isLike(obj,'like')">
            <IconAli :sty="{width:'18px',height:'18px',marginTop:'2px'}" icon='like'
                     v-if="!obj.discuss.like&&!obj.discuss.likeHover"></IconAli> <!--喜欢为false,hover为false展示-->
            <IconAli :sty="{width:'18px',height:'18px',marginTop:'2px'}" icon='liked'
                     v-if="obj.discuss.like"></IconAli> <!--喜欢为true时展示-->

            <IconAli :sty="{width:'18px',height:'18px',marginTop:'2px'}" icon='like-hover'
                     v-if="!obj.discuss.like&&obj.discuss.likeHover"></IconAli> <!--喜欢为false,hover为true展示-->
          </div>

          <!--点赞数-->
          <div class="like-count">{{ obj.discuss.likeCount }}</div>

          <!--踩-->
          <div class="unlike"
               @mouseenter="hover(obj,`unlike`)"
               @mouseleave="over(obj,`unlike`)"
               @click="isLike(obj,'unlike')">
            <IconAli :sty="{width:'18px',height:'18px',marginTop:'2px'}" icon='unlike'
                     v-if="!obj.discuss.unlike&&!obj.discuss.unlikeHover"></IconAli>
            <IconAli :sty="{width:'18px',height:'18px',marginTop:'2px'}" icon='unliked'
                     v-if="obj.discuss.unlike"></IconAli>

            <IconAli :sty="{width:'18px',height:'18px',marginTop:'2px'}" icon='unlike-hover'
                     v-if="!obj.discuss.unlike && obj.discuss.unlikeHover"></IconAli>
          </div>

          <!--回复-->
          <div class="reply" @click=reply(obj)>回复</div>
        </div>

        <!--互相回复-->
        <div class="c-c" v-for="(o,j) in obj.discuss.discussList" :key="o.discussId">

        </div>

        <!--回复框-->

      </div>

    </div>

  </div>
</template>

<script>
import IconAli from "@/views/common/IconAli";
import CourseReply from "@/components/course/CourseReply";

export default {
  //组件名称
  name: "CourseReply",
  props: {
    obj: {}
  },
  //组件注册
  components: {IconAli, CourseReply},
  //数据驱动
  data() {
    return {}
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    hover(obj, str) {
      switch (str) {
        case 'like':
          obj.discuss.likeHover = true
          break;
        case 'unlike':
          obj.discuss.unlikeHover = true
          break;
      }
    },
    over(obj, str) {
      switch (str) {
        case 'like':
          obj.discuss.likeHover = false
          break;
        case 'unlike':
          obj.discuss.unlikeHover = false
          break;
      }
    },

    //赞或者踩
    isLike(obj, str) {
      let likeFlag = obj.discuss.like;
      let unlikeFlag = obj.discuss.unlike;

      //两个都为 false,
      if (!likeFlag && !unlikeFlag) {
        switch (str) {
          case "like":
            obj.discuss.like = true
            obj.discuss.likeCount++
            break;
          case "unlike":
            obj.discuss.unlike = true
            break;
        }
        return;
      }
      // 已经点赞 likeFlag=true, unlikeFlag=false
      if (likeFlag && !unlikeFlag) {
        switch (str) {
          case "like":  //本次点击的的赞
            obj.discuss.like = false
            break;
          case "unlike": //本次点击的是踩
            obj.discuss.like = false
            obj.discuss.unlike = true
            break;
        }
        obj.discuss.likeCount--
        return;
      }
      // 已经踩,unlikeFlag=true,likeFlag=false
      if (unlikeFlag && !likeFlag) {
        switch (str) {
          case "like":  //本次点击的的赞
            obj.discuss.like = true
            obj.discuss.unlike = false
            obj.discuss.likeCount++
            break;
          case "unlike": //本次点击的是踩
            obj.discuss.unlike = false
            break;
        }
        return;
      }
    },
  },
  //钩子函数
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.course-reply-container {

  .box {
    display: flex;
    padding: 10px 0px 0px 0px;

    .head-portrait { //头像
      padding: 0px 10px 0px 0px;
    }

    .user {
      width: 100%;

      .user-details { //用户详情
        font-size: 14px;
      }

      .discuss-text { //讨论文本
        width:98%;
        margin-top: 2px;
        background-color: #F8F8F8;
        padding: 6px 6px 6px 12px;
        border-radius: 8px;
      }

      .interaction { //互动
        display: flex;

        .date-time {
          color: #9499A0;
        }

        .like {
          margin-left: 20px;
        }

        .like:hover {
          //width: 18px;
          //height: 18px;
          //margin-top:2px;
          background-size: cover;
          //background-image: url('~@/assets/course/like.png');
        }

        .like-count {
          margin: 2px 0px 0px 4px;
        }

        .unlike {
          margin-left: 20px;
        }

        .reply {
          margin-left: 20px;
          color: #9499A0;
        }

        .reply:hover {
          color: #00AEEC;
        }
      }
    }
  }
}
</style>